<!-- 歌单广场 -->
<template>
	<view>
		<!-- 状态栏 -->
		<view class="square_nav">
			<image src="../../../static/backjiantou.png" mode="" @click="square_back"></image>
			<text class="square_nav_text">歌单广场</text>
		</view>
	<!-- 导航栏 -->
	<view class="topTabs">
		<scroll-view  class="uni-swiper-tab">
			<view class="swiper-tab-list" v-for="(item,index) in items" :key="index" :class="{'active':tabIndex==index}" @tap="change(index)">
	        {{item.name}}
			<view class="swiper-tab-line">
				
			</view>
			</view>
	  
		</scroll-view>
		</view>
		<!-- 华语 -->
		<view class="square_main" :class="{dis:btnnum == 0}">
			<view class="square_box" v-for="(item,index) in huayu" :key='item.id' @click="getsl(item.id)">
				<view class="square_show"></view>
				<image class="square_image" mode="" :src="item.coverImgUrl"></image>
				<!-- 播放量角标 -->
				<view class="square_view">
					<image src="../../../static/bofang2.png" mode=""></image>
					<text>{{Math.floor(item.playCount / 10000) }}万</text>
				</view>
				<view class="square_text">
					<text >{{item.name}}</text>
				</view>
			</view>
			</view>
		<!-- 流行 -->
		<view class="square_main1" :class="{dis:btnnum == 1}">
			<view class="square_box" v-for="(item,index) in liuxing" :key='item.id' @click="getsl(item.id)">
				<view class="square_show"></view>
				<image class="square_image" mode="" :src="item.coverImgUrl"></image>
				<!-- 播放量角标 -->
				<view class="square_view">
					<image src="../../../static/bofang2.png" mode=""></image>
					<text>{{Math.floor(item.playCount / 10000) }}万</text>
				</view>
				<view class="square_text">
					<text >{{item.name}}</text>
				</view>
			</view>
		</view>
		
		<!-- 民谣 -->
		<view class="square_main" :class="{dis:btnnum == 2}">
			<view class="square_box" v-for="(item,index) in minyao" :key='item.id' @click="getsl(item.id)">
				<view class="square_show"></view>
				<image class="square_image" mode="" :src="item.coverImgUrl"></image>
				<!-- 播放量角标 -->
				<view class="square_view">
					<image src="../../../static/bofang2.png" mode=""></image>
					<text>{{Math.floor(item.playCount / 10000) }}万</text>
				</view>
				<view class="square_text">
					<text >{{item.name}}</text>
				</view>
			</view>
		</view>
		<!-- 电子 -->
		<view class="square_main" :class="{dis:btnnum == 3}">
			<view class="square_box" v-for="(item,index) in dianzi" :key='item.id' @click="getsl(item.id)">
				<view class="square_show"></view>
				<image class="square_image" mode="" :src="item.coverImgUrl"></image>
				<!-- 播放量角标 -->
				<view class="square_view">
					<image src="../../../static/bofang2.png" mode=""></image>
					<text>{{Math.floor(item.playCount / 10000) }}万</text>
				</view>
				<view class="square_text">
					<text >{{item.name}}</text>
				</view>
			</view>
		</view>
        <!-- 轻音乐 -->
		<view class="square_main" :class="{dis:btnnum == 4}">
			<view class="square_box" v-for="(item,index) in qyy" :key='item.id' @click="getsl(item.id)">
				<view class="square_show"></view>
				<image class="square_image" mode="" :src="item.coverImgUrl"></image>
				<!-- 播放量角标 -->
				<view class="square_view">
					<image src="../../../static/bofang2.png" mode=""></image>
					<text>{{Math.floor(item.playCount / 10000) }}万</text>
				</view>
				<view class="square_text">
					<text >{{item.name}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				huayu:[],
				liuxing:[],
				minyao:[],
				dianzi:[],
				qyy:[],
				sHeight:500,
				btnnum: 0,
				tabIndex:'',
				items: [
					{
						id:1,
						name: '华语'
					},
					{
						id:2,
						name: '流行'
					},
					{
						id:3,
						name:'民谣'
					},
					{
						id:4,
						name:'电子'
					},
					{
						id:5,
						name:'轻音乐'
					}
					
				],
			}
		},
		onShow() {
			this.gethuayu()
			this.getliuxing()
			this.getminyao()
			this.getdianzi()
			this.getqyy()
		},
		methods: {
			change(e) {
			    this.btnnum = e
			    this.tabIndex = e
			},
			gethuayu(){
				uni.request({
					url:'http://localhost:3000/top/playlist?limit=100&order=hot',
					data:{
						cat:'华语',
						},
					method:'GET',
					success: (res) => {
						this.huayu = res.data.playlists
					}
				})
			},
			getliuxing(){
				uni.request({
					url:'http://localhost:3000/top/playlist?limit=100&order=hot',
					data:{
						cat:'流行',
						},
					method:'GET',
					success: (res) => {
						this.liuxing = res.data.playlists
					}
				})
			},
			getminyao(){
				uni.request({
					url:'http://localhost:3000/top/playlist?limit=100&order=hot',
					data:{
						cat:'民谣',
						},
					method:'GET',
					success: (res) => {
						this.minyao = res.data.playlists
					}
				})
			},
			getdianzi(){
				uni.request({
					url:'http://localhost:3000/top/playlist?limit=100&order=hot',
					data:{
						cat:'电子',
						},
					method:'GET',
					success: (res) => {
						this.dianzi = res.data.playlists
					}
				})
				
			},
			getqyy(){
				uni.request({
					url:'http://localhost:3000/top/playlist?limit=100&order=hot',
					data:{
						cat:'轻音乐',
						},
					method:'GET',
					success: (res) => {
						this.qyy = res.data.playlists
					}
				})
			},
			square_back(){
				uni.navigateBack({
					delta:1
				})
			},
			getsl(id){
				uni.navigateTo({
					url:'../sldetails/sldetails'
				})
				uni.setStorageSync('setData',id);
				console.log(id)
				
				
			}
		}
	}
</script>

<style lang="scss">
page{
		margin:0px;
		padding:0px;
	}
	.square_main{
		display: none;
	}
	.square_main1{
		display: none;
	}
	.dis{
		display: block;
	}
	.topTabs{
		width:700rpx;
		height:100rpx;
		margin-top:20rpx;
		margin-left:20rpx;
		border-radius: 10rpx;
		
	}
	.swiper-tab-list{
		width:140rpx;
		height:60rpx;
		color:#696969;
		font-weight: bold;
		float: left;
		
		margin-top:10rpx;
		text-align: center;
	}
	.uni-swiper-tab .active{
		
		width:140rpx;
		height: 60rpx;
		color:#313131;
		font-family: bold;
	}
	.active .swiper-tab-line{
		width:80rpx;
		margin:auto;
		background-color: #fe3c3c;
		border: 6rpx solid #fe3c3c;
		border-radius: 60rpx;
		margin-top:-10rpx;
		
	}
	
	// 内容
	.square_main{
		width:700rpx;
		margin-left:30rpx;
		background-color: #fff;
		margin-top: 20rpx;
	}
	.square_main1{
		width:700rpx;
		margin-left:30rpx;
		background-color: #fff;
		margin-top: 20rpx;
	}
	
	.square_box{
		position: relative;
		width: 200rpx;
		height:300rpx;
		float: left;
		margin-left:20rpx;
		.square_show{
			width: 180rpx;
			height:200rpx;
			position: absolute;
			left:10rpx;
			border-radius: 20rpx;
			background-color: #ededed;
			margin-top:-8rpx;
		}
		.square_image{
		width:200rpx;
		height:200rpx;
		border-radius: 30rpx;
		
	}
	    .square_text{
			width:200rpx;
			height:60rpx;
			font-size: 10rpx;
			overflow: hidden;
			word-break: break-all;  /* break-all(允许在单词内换行。) */
			text-overflow: ellipsis;  /* 超出部分省略号 */
			display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
			-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
			-webkit-line-clamp: 2; /** 显示的行数 **/
		}
		// 播放量角标
		.square_view{
			position: absolute;
			top:10rpx;
			right:10rpx;
			width: auto;
			height:30rpx;
			image{
				width:20rpx;
				height:20rpx;
				
			}
			text{
				height:20rpx;
			color: #fff;
				font-size: 5px;
			}
		}
	}
	
	.square_nav{
		width:750rpx;
		height:80rpx;
		margin-top:30rpx;
		image{
			width:50rpx;
			height: 50rpx;
			position: absolute;
			top:20rpx;
			left:50rpx;
		}
		text{
			width: 200rpx;
			height: 50rpx;
			position: absolute;
			top:24rpx;
			left:120rpx;
			font-weight: 600;
			font-size: 32rpx;
		}
	}
</style>
